<template>
  <div>
    <vedioComponent :recommendList="recommendList" @getList="getList"></vedioComponent>
  </div>
</template>
<script setup >
  import vedioComponent from '../../../components/vedioComponent/index.vue'
  import {onMounted, ref, watch} from 'vue'
  import { reqVedioList } from "../../../api/home.js";
  import {recommendStore} from "@/store/modules/classifyCation.js";
  let recommendList = ref({})
  const store = recommendStore();
  const getList = async () => {
    let res = await reqVedioList();
    recommendList.value = res.page.list;
  }
  onMounted(async() => {
    console.log(store,'store')
    let res = await reqVedioList();
    recommendList.value = res.page.list;
  })

  watch(
      () => store.recommendList,
      (newVal, oldVal) => {
        recommendList.value = newVal
        console.log(recommendList.value,'22222222')
      }
  );
</script>

<style scoped>
  
</style>